<template>
  <!-- 知识列表容器 -->
  <div class="knowledge-box">
    <!-- 遍历知识数组，渲染每个知识条目 -->
    <div class="knowledge" v-for="(item, index) in cknowledges" :key="index">
      <!-- 根据文件类型展示视频或图片（MP4格式用video标签） -->
      <video class="knowledge-img" width="200px" height="160px" v-if="item.type==='mp4'||item.type==='MP4'" accept="MP4,mp4" :src="$store.state.imgShowRoad + '/file/' + item.picPath" controls autoplay/>
      <img v-else class="knowledge-img" :src="$store.state.imgShowRoad + '/file/' + item.picPath" alt="" />

      <!-- 知识信息区域（标题、内容、发起者） -->
      <div class="info">
        <!-- 标题（点击跳转详情页） -->
        <h4 class="title" @click="handleDetail(item)">{{ item.title }}</h4>
        <!-- 内容（限制5行显示，超出省略） -->
        <p class="content">{{ item.content }}</p>
        <!-- 发起者信息（包含头像和名称） -->
        <span class="initiator">
          <img src="../assets/img/up-user.png" @click="handleDetail(item)"/>
          {{item.ownName}}
        </span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    // 接收父组件传递的知识列表数据
    cknowledges: {
      type: Array,
    },
  },
  methods:{
    // 点击跳转知识详情页
    handleDetail(item){
      this.$router.push(`/home/knowledge/${item.knowledgeId}`)
    }
  }
};
</script>

<style lang="less" scoped>
/* 知识列表整体样式*/
.knowledge-box {
  width: 1100px;
  margin: 0 auto;
  background-color: rgb(255, 255, 255);
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  flex-wrap: wrap;
  /* 单个知识项样式（宽高、内边距、背景、边距） */
  .knowledge {
    width: 500px;
    height: 200px;
    padding: 20px;
    border: 1px solid #22202b;
    border-radius: 20px;
    background-color: #f5f5f5;
    margin: 10px;
    video{
      border: 1px solid #f2f2f2;
      border-radius: 6px;
    }
    .knowledge-img {
      float: left;
      width: 200px;
      height: 160px;
      margin-right: 10px;
      border-radius: 15px;
    }
    .info {
      .title {
        font-weight: bold;
        overflow: hidden;
        /*文字用省略号替代超出的部分*/
        text-overflow: ellipsis;
        display: -webkit-box;
        /*限制在一个块元素显示文本的行数*/
        -webkit-line-clamp: 1;
        /*设置或检索伸缩盒对象的子元素排列方式*/
        -webkit-box-orient: vertical;
        cursor: pointer;
        &:hover{
          color: #035D1C;
          text-decoration: underline;
        }
      }
      width: 200px;
      float: left;
      .content {
        height: 100px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 5;
        -webkit-box-orient: vertical;
      }
      .initiator {
        color: #bfbfbf;
        img {
          padding: 0;
          width: 20px;
          height: 20px;
          margin: 0 10px 0 0;
          vertical-align: center;
          border-radius: 6px;
        }
      }
    }
  }
}
</style>